<!-- <!DOCTYPE html>
<html>
<head>
    <title>AI对话助手 (SiliconCloud版)</title>
    <style>
        #chat-container { width: 500px; margin: 20px auto; }
        #chat-history { 
            height: 400px; 
            border: 1px solid #ddd; 
            padding: 10px; 
            overflow-y: auto;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        #user-input { 
            width: 75%; 
            padding: 10px; 
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button { 
            padding: 10px 15px; 
            background: #4CAF50; 
            color: white; 
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .user-message { color: #0066cc; margin: 5px 0; }
        .ai-message { color: #333; margin: 5px 0; }
    </style>
</head>
<body>
    <div id="chat-container">
        <h1>AI对话助手</h1>
        <div id="chat-history"></div>
        <input type="text" id="user-input" placeholder="输入消息..." autofocus>
        <button onclick="sendMessage()">发送</button>
    </div>

    <script>
        const chatHistory = document.getElementById('chat-history');
        const userInput = document.getElementById('user-input');
        
        // 初始化对话历史
        let conversation = [
            { role: "system", content: "你是一个有帮助的AI助手。" }
        ];

        // 添加消息到聊天界面
        function addMessage(role, content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = role === 'user' ? 'user-message' : 'ai-message';
            messageDiv.innerHTML = `<strong>${role === 'user' ? '你' : 'AI'}:</strong> ${content}`;
            chatHistory.appendChild(messageDiv);
            chatHistory.scrollTop = chatHistory.scrollHeight;
        }

        // 发送消息到后端
        async function sendMessage() {
            const userMessage = userInput.value.trim();
            if (!userMessage) return;

            addMessage('user', userMessage);
            userInput.value = '';
            conversation.push({ role: "user", content: userMessage });

            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ messages: conversation })
                });

                if (!response.ok) throw new Error('请求失败');
                
                const data = await response.json();
                addMessage('assistant', data.reply);
                conversation.push({ role: "assistant", content: data.reply });

            } catch (error) {
                console.error(error);
                addMessage('system', '对话出错，请重试');
            }
        }

        // 回车键发送
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
    </script>
</body>
</html> -->


<!DOCTYPE html>
<html>
<head>
    <title>AI对话助手 (带记忆功能)</title>
    <style>
        #chat-container { 
            width: 500px; 
            margin: 20px auto; 
            font-family: Arial, sans-serif;
        }
        #chat-history { 
            height: 400px; 
            border: 1px solid #ddd; 
            padding: 10px; 
            overflow-y: auto;
            margin-bottom: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        #user-input { 
            width: 70%; 
            padding: 10px; 
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-right: 5px;
        }
        .button-group {
            margin-top: 10px;
        }
        button {
            padding: 10px 15px; 
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 5px;
        }
        #send-btn {
            background: #4CAF50; 
            color: white;
        }
        #clear-btn {
            background: #f44336;
            color: white;
        }
        button:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        .user-message { 
            color: #0066cc; 
            margin: 10px 0;
            padding: 8px;
            background-color: #e6f2ff;
            border-radius: 5px;
        }
        .ai-message { 
            color: #333; 
            margin: 10px 0;
            padding: 8px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
        .system-message {
            color: #666;
            font-style: italic;
            margin: 5px 0;
            text-align: center;
        }
        .typing-indicator {
            color: #999;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <h1>AI对话助手</h1>
        <div id="chat-history"></div>
        <div>
            <input type="text" id="user-input" placeholder="输入消息..." autofocus>
            <button id="send-btn">发送</button>
        </div>
        <div class="button-group">
            <button id="clear-btn">清空对话</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const chatHistory = document.getElementById('chat-history');
            const userInput = document.getElementById('user-input');
            const sendBtn = document.getElementById('send-btn');
            const clearBtn = document.getElementById('clear-btn');
            
            // 添加欢迎消息
            addMessage('system', '欢迎使用AI对话助手，我可以记住我们的对话历史。');

            // 添加消息到聊天界面
            function addMessage(role, content) {
                const messageDiv = document.createElement('div');
                
                if (role === 'typing') {
                    messageDiv.className = 'typing-indicator';
                    messageDiv.textContent = content;
                } else {
                    messageDiv.className = role + '-message';
                    const strong = document.createElement('strong');
                    strong.textContent = role === 'user' ? '你: ' : role === 'assistant' ? 'AI: ' : '';
                    
                    messageDiv.appendChild(strong);
                    messageDiv.appendChild(document.createTextNode(content));
                }
                
                chatHistory.appendChild(messageDiv);
                chatHistory.scrollTop = chatHistory.scrollHeight;
            }

            // 发送消息到后端
            async function sendMessage() {
                const userMessage = userInput.value.trim();
                if (!userMessage) return;

                addMessage('user', userMessage);
                userInput.value = '';
                sendBtn.disabled = true;
                userInput.disabled = true;
                
                // 显示"正在输入"指示器
                const typingIndicator = document.createElement('div');
                typingIndicator.className = 'typing-indicator';
                typingIndicator.textContent = 'AI正在思考...';
                chatHistory.appendChild(typingIndicator);
                chatHistory.scrollTop = chatHistory.scrollHeight;

                try {
                    const response = await fetch('/api/chat', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ message: userMessage })
                    });

                    // 移除"正在输入"指示器
                    chatHistory.removeChild(typingIndicator);
                    
                    if (!response.ok) {
                        throw new Error(`请求失败: ${response.status}`);
                    }
                    
                    const data = await response.json();
                    addMessage('assistant', data.reply);

                } catch (error) {
                    console.error('发送消息出错:', error);
                    addMessage('system', `对话出错: ${error.message}`);
                } finally {
                    sendBtn.disabled = false;
                    userInput.disabled = false;
                    userInput.focus();
                }
            }
            
            // 清空对话历史
            async function clearHistory() {
                try {
                    clearBtn.disabled = true;
                    const response = await fetch('/api/clear', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' }
                    });
                    
                    if (response.ok) {
                        chatHistory.innerHTML = '';
                        addMessage('system', '对话历史已清空，开始新的对话。');
                    }
                } catch (error) {
                    console.error('清空历史出错:', error);
                    addMessage('system', '清空对话历史时出错');
                } finally {
                    clearBtn.disabled = false;
                }
            }
            
            // 事件监听
            sendBtn.addEventListener('click', sendMessage);
            clearBtn.addEventListener('click', clearHistory);
            
            userInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
        });
    </script>
</body>
</html>